import React, { Component } from 'react'
import { Icon } from 'antd-mobile'

export default class TradeV2 extends Component {
  render() {
    return (
      <div className={`rt-trade-v2-container cm-flex-container`}>
        <img className={`rt-img-box`} alt="logo-v2" src={require('static/images/logo-v2.png')} />
        <div className={`cm-carousel-children`}>
          <span>公告</span>
          <span>关于开通借记卡支付通道的通知</span>
        </div>

        <div className={`rt-real-time-price`}>
          <div className={`rt-active`}>
            <span>工业银</span>
            <span>3503</span>
            <Icon type="up" />
          </div>
          <div>
            <span>工业油</span>
            <span>3504</span>
            <Icon type="down" />
          </div>
        </div>

        <div className={`rt-scrollable-container`}>
          <div className={`rt-price-statistics-box`}>
            <span>昨收：3491</span>
            <span>开盘：3499</span>
            <span>最高：3520</span>
            <span>最低：3479</span>
          </div>

          <div className={`rt-chart-category-box`}>
            <span>分时线</span>
            <span>5分钟线</span>
            <span>30分钟线</span>
            <span>1小时线</span>
            <span className={`rt-active`}>日线</span>
          </div>

          <img className={`rt-img`} alt="chart" src={require('static/images/chart.png')} />

          <div className={`rt-about-user-box`}>
            <div className={`rt-left-box`}>
              <Icon type="question" />
              <span>资产</span>
              <span className={`rt-money`}>3,686.90元</span>
              <img alt="auth" src={require('static/images/auth.png')} />
            </div>
            <div className={`rt-right-box`}>
              <Icon type="question" />
              <span>充值</span>
              <Icon type="question" />
              <span>提现</span>
            </div>
          </div>

          <div className={`rt-available-goods-box`}>
            <div className={`rt-goods rt-active`}>
              <span>0.1KG</span>
              <span className={`rt-middle-text`}>8元／手</span>
              <span>波动盈亏1元</span>
              <div className={`cm-right-angle-trangle-box`}>
                <div className={`cm-tick-box cm-tick-box-hide`}></div>
              </div>
            </div>

            <div className={`rt-goods`}>
              <span>0.1KG</span>
              <span className={`rt-middle-text`}>8元／手</span>
              <span>波动盈亏2元</span>
            </div>

            <div className={`rt-goods`}>
              <span>0.1KG</span>
              <span className={`rt-middle-text`}>8元／手</span>
              <span>波动盈亏3元</span>
            </div>
          </div>

          <div className={`rt-operate-btn-grp`}>
            <div className={`rt-left-btn`}>
              <Icon type="question" />
              <span>买涨</span>
            </div>
            <div className={`rt-right-btn`}>
              <Icon type="question" />
              <span>买跌</span>
            </div>
          </div>

          <div className={`rt-available-goods-box rt-flex-wrap`}>
            {
              Array(18).fill(1).map(v => (
                <div key={Math.random()} className={`rt-goods`}>
                  <span>0.1KG</span>
                  <span className={`rt-middle-text`}>8元／手</span>
                  <span>波动盈亏3元</span>
                </div>
              ))
            }
          </div>

          <div className={`rt-deal-order-text`}>正在交易的订单</div>

          <div className={`rt-deal-order-box`}>
            <div className={`rt-updown-box`}>
              <span>涨</span>
            </div>
            <div className={`rt-profit-loss-box`}>
              <img alt="+" src={require('static/images/shield.png')} />
              <span>止盈损</span>
            </div>
            <div className={`rt-goods`}>
              <span>3KG 工业银</span>
              <span>开仓价 3433</span>
            </div>
            <span className={`rt-delta`}>+24.00</span>
            <div className={`rt-btn`}>
              <span>平仓</span>
            </div>
          </div>
          <div className={`rt-deal-order-box`}>
            <div className={`rt-updown-box`}>
              <span>涨</span>
            </div>
            <div className={`rt-profit-loss-box`}>
              <img alt="+" src={require('static/images/shield.png')} />
              <span>止盈损</span>
            </div>
            <div className={`rt-goods`}>
              <span>3KG 工业银</span>
              <span>开仓价 3433</span>
            </div>
            <span className={`rt-delta`}>+24.00</span>
            <div className={`rt-btn`}>
              <span>平仓</span>
            </div>
          </div>
        </div>

        <div className={`rt-footer-tab-box`}>
          <div className={`rt-active-tab`}>
            <Icon type="line-chart" />
            <span>微盘</span>
          </div>
          <div>
            <Icon type="question" />
            <span>中盘</span>
          </div>
          <div>
            <Icon type="user" />
            <span>账户</span>
          </div>
          <div>
            <Icon type="question" />
            <span>财经</span>
          </div>
          <div>
            <Icon type="question" />
            <span>排行</span>
          </div>
        </div>
      </div>
    )
  }
}